<template>
  <div>
    <div class="" v-if="isShowBind">
      <div class="c-ph24 c-fs18 c-fc-gray c-pv10 c-bg-sgray">请绑定持卡人本人的银行卡</div>
      <div class="c-ph24">
        <div class="c-bg-white c-fs24 c-fc-xblack c-pv28 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="">银行类型</div>
          <div class="c-flex-row">
            <popup-picker :themeColor="$getThemeColor()" title="" :data="cardtypeList" v-model="cardtypeValue" :show-name="true" :columns="1" @on-change="selectCardType" placeholder="请选择卡类型"></popup-picker>
          </div>
        </div>
        <div class="c-bg-white c-mt10 c-fs24 c-fc-xblack c-pv28 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center" v-if="cardtypeValue[0] == 19">
          <div class="c-l">银行名称</div>
          <div class=""><input type="text" v-model="otherBankName" placeholder="请输入银行名称" class="c-textAlign-r c-fs24 c-bd0" /></div>
        </div>
        <div class="c-bg-white c-mt10 c-fs24 c-fc-xblack c-pv28 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div>开户行城市</div>
          <div class="c-flex-row">
            <x-address :themeColor="$getThemeColor()" title="" v-model="addrValue" :list="addressData" placeholder="请选择地址" :show.sync="showAddress"></x-address>
          </div>
        </div>
        <div class="c-bg-white c-mt10 c-fs24 c-fc-xblack c-pv28 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="c-lh c-ws-n">支行名称</div>
          <div class=""><input type="text" v-model="branch" placeholder="请输入支行名称" class="c-textAlign-r c-fs24 c-bd0" /></div>
        </div>
        <div class="c-bg-white c-fs24 c-fc-xblack c-pv28 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="c-lh c-ws-n">卡号</div>
          <div class=""><input type="tel" maxlength="20" v-model="account" placeholder="请输入卡号" class="c-textAlign-r c-fs24 c-bd0" /></div>
        </div>
        <div class="c-bg-white c-fs24 c-fc-xblack c-pv28 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="c-lh c-ws-n">持卡人</div>
          <div class=""><input type="text" v-model="holder" placeholder="请输入持卡人" class="c-textAlign-r c-fs24 c-bd0" /></div>
        </div>
        <div class="c-bg-white c-fs24 c-fc-xblack c-pv28 c-bd-b1 c-w100 c-flex-row c-justify-sb c-aligni-center">
          <div class="c-lh c-ws-n">手机号</div>
          <div class=""><input @blur="blurInput" type="tel" maxlength="11" v-model.number="preservedMobile" placeholder="请输入预留手机号" class="c-textAlign-r c-fs24 c-bd0" /></div>
        </div>
        <div class="c-fc-white c-lh c-fs24 c-mh24 c-hh64 c-br32 c-textAlign-c c-flex-row c-flex-center c-mt64 theme-bg" @click="submit">提交</div>
      </div>
    </div>
    <div class="c-pt20 c-ph24" v-else>
      <div class="c-hh160 c-p" @click="bclose">
        <img :src="'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/bank/' + userBank.bankCardId+'.png'" class="c-w100 c-block c-h c-br10" />
        <span class="c-lh c-pa bclose icon iconfont c-fc-white c-fs20">&#xe6ec;</span>
        <span class="c-lh c-pa bnum c-fs28 c-fc-white">*****&nbsp;*****&nbsp;*****&nbsp;{{bankAccount}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import { XAddress, PopupPicker } from 'ckjrweb-mp-ui/src/components/index'
export default {
  name: 'BindBanckcard',
  components: {
    XAddress,
    PopupPicker
  },
  props: [],
  beforeCreate() {

  },
  created() {
    utilJs.appShare(this);
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      userBank: [], // 用户绑定银行卡信息
      bankAccount: '',
      isShowBind: true, // 是否显示绑定银行卡
      addrValue: [],
      showAddress: false,
      addressData: '', // addressData,
      cardtypeValue: [],
      //cardtypeList:[['工商银行','建设银行','农业银行']]
      cardtypeList: [],
      otherBankName: '',
      branch: '',
      account: '',
      holder: '',
      preservedMobile: '',
      isPost: true
    }
  },
  mounted() {

  },
  computed: {

  },
  watch: {
    // preservedMobile() {
    //   // 监听手机号
    //   if (this.preservedMobile && isNaN(this.preservedMobile)) {
    //       this.confrimPassword = ''
    //   } else {
    //     this.confrimPassword.length > 11 ? this.confrimPassword.substr(0, 11) : this.confrimPassword
    //   }
    // },
    account() {
      // 监听卡号
      // if (this.account && isNaN(this.account)) {
      //     this.account = ''
      // } else {
      //   this.account.length > 19 ? this.account.substr(0, 19) : this.account
      // }
    }
  },
  methods: {
    //输入框失去焦点
    blurInput(e) {
      setTimeout(() => {
        document.body.scrollTop = 0;
      }, 100);
    },
    selectCardType(val) {
      this.cardtypeValue = [Number(val)];
    },
    bclose: function () {
      let $this = this;
      this.$cjConfirm({
        message: '确定要解绑？',
        onConfirm:() => {
          utilJs.getMethod(global.apiurl + 'members/unBindBank?ubcId=' + $this.userBank.ubcId, function (res) {
            $this.$showCjToast({
              type: 'success',
              text: '解绑成功',
            });
            $this.userBank = []
            $this.getBankList()
            $this.cardtypeValue = []
            $this.addrValue = []
            $this.branch = ''
            $this.holder = ''
            $this.account = ''
            $this.preservedMobile = ''
            $this.addrValue = []
            $this.isShowBind = true
          });
        }
      })
    },
    submit() {
      let $this = this
      if (this.cardtypeValue[0] != '' && ((this.cardtypeValue[0] == 19 && this.otherBankName != '') || this.cardtypeValue[0] != 19) && this.branch != '' && this.holder != '' && this.account != '' && this.preservedMobile != '' && this.addrValue != []) {
        // 判断用户信息填写是否完整
        let data = {
          ubcId: this.userBank.ubcId,
          bankCardId: this.cardtypeValue[0],
          branch: this.branch,
          holder: this.holder,
          account: this.account,
          preservedMobile: this.preservedMobile,
          provinceId: this.addrValue[0],
          cityId: this.addrValue[1]
        }
        if (this.cardtypeValue[0] == 19) {
          data.otherBankName = this.otherBankName;
        }
        this.isPost = false;
        utilJs.postMethod(global.apiurl + 'members/bindBank', data, function (res) {
          if (res) {
            $this.isPost = true;
            $this.$showCjToast({
              type: 'success',
              text: '绑定成功',
            });
            // $this.getBankList()
            $this.isShowBind = false;
            $this.userBank = res;
            $this.bankAccount = $this.userBank.account.substr(-4, 4);
          }
        }, function () {
          $this.isPost = true;
        });
      } else {
        $this.$showCjToast({
          type: 'warn',
          text: '信息填写不完整',
        });
      }
    },
    getBankList() {
      let $this = this;
      utilJs.getMethod(global.apiurl + 'members/bankPage', function (res) {
        if (res.userBank != null) {
          $this.isShowBind = false;
          res.userBank.bankCardId = res.userBank.bankCardId > res.bankList.length ? 1 : res.userBank.bankCardId
          $this.userBank = res.userBank;
          if (res.userBank.account != '' && res.userBank.account != null) {
            $this.bankAccount = res.userBank.account.substr(-4, 4);
          } else {
            // $this.$showCjToast({
            //   type:'warn',
            //   text: '无卡号，请重新绑定',
            //   onHide() {
            $this.isShowBind = true;
            $this.cardtypeList = [];
            for (let i in res.bankList) {
              let obj = {
                name: res.bankList[i].bankName,
                value: res.bankList[i].bankCardId
              };
              $this.cardtypeList.push(obj);
            }
            // }
            // });
          }
        } else { // 用户未绑定银行卡
          $this.isShowBind = true;
          $this.cardtypeList = [];
          for (let i in res.bankList) {
            let obj = {
              name: res.bankList[i].bankName,
              value: res.bankList[i].bankCardId
            };
            $this.cardtypeList.push(obj);
          }
        }
      });
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.isPost = true;
    setDocumentTitle("添加银行卡");// eslint-disable-line
    utilJs.getMethod(`${global.apiurl}common/getAreaListForAgent?level=2`, res => { // 改为只要区
      this.addressData = res.data;
      this.getBankList();
    }, failRes => {
    });
    this.wechatShare();
  },
  deactivated() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bclose {
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
}
.bnum {
  right: 0.5rem;
  top: 2.3rem;
  z-index: 1;
}
.weui-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
img {
  pointer-events: none;
}
.vux-cell-box >>> .vux-popup-picker-value {
  color: #333;
}
</style>
